<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>Document</title>
        <link rel="stylesheet" type="text/css" href="../layui/css/layui.css">
		<link rel="stylesheet" type="text/css" href="../css/guide-d.css">
	</head>
<style type="text/css">
            #paymentpaw{
            width: 100%;
            position:fixed;
            width: 100%;
            height: 100%;
            display: none;
            z-index: 9999;
            background: rgba(0,0,0,0.5);
        }
        .enter{
            width: 100%;
            background:#FFFFFF;
            z-index: 102;
            position: fixed;
            bottom:0;
            z-index: 102;
            height: 50%;

        }
        .enter-close{
            width: 100%;
            padding: 1% 0;
        }
        .enter-close i{
            width: 1.5em;
            height: 1.5em;
            display: block;
            float: right;
            margin-right: 3%;
            margin-top: 3%;
            font-style: normal;
        }
        .enter-text{
            width: 100%;
            text-align: center;
            color: #8D8D8D;
            border-bottom:2px solid #F5F5F5 ;
            padding: 2% 0;
            margin-bottom: 4%;
        }
        .enter-input{
            text-align: center;

        }
        .enter-input input{
            width: 90%;
            border: 1px solid #CCCCCC;
            padding: 2% 0;
            text-align: center;
            font-size: 16px;
            display: inline-block;

        }
        .queding{
            padding: 3%;
        }
        .queding span{
            width: 100%;
            display: block;
            background: #57d5f3;
            border-radius: 15px;
            color: #fff;
            padding: 5px 0;
            text-align: center;
        }
        </style>
	<body>
		<div class="select">
			<div>
				<div class="center select-t">
					<p>确认聘请</p>
					<img src="../img/cancel.png" class="close">
				</div>
				<div class="select-b">
					<p>提示：聘请导游即扣除10美金</p>
					<div class="flex top-up-box">
						<p id="m-number">支付金额：<span>￥310</span></p>
						<div class="top-up">去充值</div>
					</div>
					<div class="sure center">确定聘请</div>
				</div>
			</div>
		</div>
		<div id="paymentpaw">

            <div class="enter">
                <div class="enter-close clearfix">
                    <i>x</i>
                </div>
                <div class="enter-text">请输入支付密码</div>
                <div class="enter-input">
                    <input type="password" name="pay" placeholder="输入支付密码">
                </div>

                <div class="queding"><span>确定发布</span></div>
            </div>
        </div>
		<header>
			<a href="javascript:history.back(-1)" class="back"><img src="../img/back.png" height="18px"></a>
			<div class="center title">同城导游</div>
		</header>
		<main>
		<div class="daoyou">
           <!-- <div class="flex information">
                    <img src="../img/logo.png" height="50px">
                    <div>
                        <p>服务区域：深圳南山区</p>
                        <p>出行时间<span>05-01</span><span>09:20</span></p>
                        <img src="../img/star-f.png" height="8px">
                        <img src="../img/star-f.png" height="8px">
                        <img src="../img/star-f.png" height="8px">
                        <img src="../img/star-f.png" height="8px">
                        <img src="../img/star-f.png" height="8px">
                        <span class="score">5.0分</span>
                    </div>
            </div>
            <div class="pic">
                <div>
                    <p>约会地点照片</p>
                    <div class="flex pic-wrap">
                        <img src="../img/logo.png" height="50px">
                        <img src="../img/logo.png" height="50px">
                        <img src="../img/logo.png" height="50px">
                    </div>
                </div>
                <p>每小时收费:<span class="dollars">100美金</span></p>
                <p>聘请时间：<input type="text" name=""></p>
            </div>  -->        
            </div>
			<div>
				<div class="hire center">确认聘请</div>
			</div>
		</main>

		<script src="../js/jquery-3.3.1.js"></script>
          <script src="../layui/layui.all.js"></script>
    <script src="../layui/layui.js"></script>
		<script src="../js/guide-d.js"></script>
	</body>
</html>	
<script type="text/javascript">
     function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg);  //匹配目标参数
            if (r != null) return unescape(r[2]); return null; //返回参数值
        }
        //接收URL中的参数id
        var id = getUrlParam('id');
        console.log(id);
        $.ajax({
            url:"/meiyou/selAllGuideDetails",
            data:'gId='+id,
            type:"post",
            success:function(data){
                console.log(data);
                $('.daoyou').append("<div class=\"flex information\">" +
        "                    <img src='"+data.u_img+"' height=\"50px\">" +
        "                    <div>" +
        "                        <p>"+"服务区域："+data.g_area+"</p>" +
        "                        <p>"+data.g_shuoming+"</p>" +
        "                        <p class='score' id='"+data.g_assess+"'>"+"</p>"+
        "                    </div>" +
        "            </div>" +
        "            <div class=\"pic\">" +
        "                <div>" +
        "                    <p>约会地点照片</p>" +
        "                    <div class=\"flex pic-wrap\">" +
       
        "                    </div>" +
        "                </div>" +
        "                <p>每小时收费:<span class=\"dollars\">"+data.g_meijin+"美金"+"</span></p>" +
        "                <p>聘请时间：<input type=\"text\" name=\"time\"></p>" +
        "            </div>");

                $.each(data.array,function(i,val){
                    $('.pic-wrap').append( "<img src='"+val+"' height=\"50px\">")
                });
                var score=data.g_assess;
                layui.use(['rate'], function(){
                    var rate = layui.rate;
                    rate.render({
                        elem: '.score',
                        value: score,
                        half: false,
                        text: true,
                        readonly: true,
                        setText: function(value){
                            this.span.text(value+'分');
                        }
                    });

                });

            }
        });
         $('.sure').click(function(){
            $(this).hide();
            $('#paymentpaw').show();
        });
        $('.enter-close').click(function(){
             $('#paymentpaw').hide();
             
        });
        $('.queding').click(function(){
            var uCount = localStorage.getItem("uCount");
             var pay=$('input[name="pay"]').val();
             var time=$('input[name="time"]').val();
             $.post('/meiyou/hireGuide',{
                    uCount:uCount,
                    pay:pay,
                    time:time,
                    gId:id
             },function(data){
                if(data.code==100){
                    layer.msg(data.msg,function(){
                    window.location.reload();
                });
                }else{
                    layer.msg(data.msg);
                }
                
                console.log(data);
             })
        });
          $.post('/meiyou/getMeijin',function(data){
        $('#m-number span').text("￥"+data.meijin);
    });
</script>